s

1.Introduction au web


Module Programmation Web 1

Lotfi NAJDI


Faculté Polydisciplinaire de Taroudant

Licence Génie Informatique

2024-2025

🎯 Objectifs

  • Comprendre les concepts fondamentaux du web et son importance dans la société moderne.

  • Avoir un aperçu de l’évolution historique du web.

  • Identifier les composants essentiels du web et leur rôle.

  • Découvrir les notions de front-end et back-end en développement web.

  • Se familiariser avec les technologies et outils utilisés en développement web.

Introduction au Web

Qu’est-ce que le Web ?

  • Le World Wide Web (WWW) ou simplement le Web , inventé par Tim Berners-Lee, est un système global sur Internet permettant l’accès à des documents hypertextes interconnectés.

  • un document hypertexte est :

    • un fichier contenant du texte, des images et des liens cliquables (hyperliens) permettant de naviguer vers d’autres pages ou ressources web consultés à l’aide de navigateurs.
    • un document hypertexte est généralement écrit en langage HTML et constitue la base des pages web visualisées dans un navigateur internet.

  • Un lien hypertexte (hyperlink en anglais) dans un document est un élément cliquable, souvent du texte ou une image, qui redirige vers une autre ressource (page web, fichier, ou section du document)

## Qu’est-ce que le Web ?

Schéma de navigation entre documents hypertexte sur différents serveurs web

Différence entre Internet et le Web

  • Un réseau mondial de réseaux interconnectés, reliant des milliards d’appareils (ordinateurs, serveurs, smartphones, etc.).

  • Infrastructure physique composée de câbles sous-marins, satellites, antennes relais, centres de données, ainsi que de routeurs et commutateurs qui assurent l’acheminement des données.

  • Internet supporte une variété de services tels que l’e-mail, le transfert de fichiers (FTP), la voix sur IP (VoIP), l’accès sécurisé à distance (SSH), le streaming ..etc .

  • Note

    Internet est l’infrastructure réseau mondiale qui permet la connexion entre les ordinateurs et serveurs alors que le Web constitue un service reposant sur cette infrastructure, facilitant l’accès aux pages web via des navigateurs.

Importance du Web dans la Société Moderne

  • Transformation numérique : Le web a révolutionné la manière dont les entreprises opèrent.
  • Commerce électronique : Facilitation des transactions commerciales en ligne.
  • Communication globale : Connecte les individus à travers le monde.
  • Accès à l’information : Démocratisation de l’accès aux connaissances.
  • Innovation technologique : Moteur de développement pour de nouvelles technologies et services.

Aperçu Historique du Web

Les Années 1990 : La Naissance du Web

---
config:
  theme: forest
  themeVariables:
    fontSize: 25px
---
timeline
  1989-1990: Invention du World Wide Web par Tim Berners-Lee
  1993: Lancement du navigateur Mosaic
  1994: Fondation du W3C pour standardiser les technologies web.
  1995: Création de JavaScript et lancement d'Amazon
  1996: Apparition des CSS
  1998: Naissance de Google

Les Années 2000 : Ère du Web 2.0

---
config:
  theme: forest
---
timeline
  2001: Lancement de Wikipedia
  2003: Sortie de WordPress
  2004: Lancement de Facebook et émergence du terme "Web 2.0"
  2005: Création de YouTube
  2007: Sortie du premier iPhone

  • Le terme Web 2.0 fait référence à une nouvelle phase d’Internet, où les utilisateurs ne se contentent plus de consulter des informations, mais deviennent eux-mêmes des créateurs de contenu.
  • Emergence des blogs et des wikis, permettant aux utilisateurs de créer et de partager du contenu facilement.
  • Une transition vers des sites web plus interactifs et centrés sur l’utilisateur.
  • L’introduction de l’iPhone en 2007 marque le début de l’ère du web mobile, rendant Internet accessible partout et à tout moment.

Les Années 2010 et au-delà : Vers un Web Omniprésent

---
config:
  theme: neutral
---
timeline
  2010: Apparition de HTML5 et Instagram
  2011: Lancement du Responsive Web Design
  2015: Recherches mobiles dépassent celles sur ordinateur
  2016: Adoption de HTTP/2
  2018: Mise en application du RGPD
  2020: Impact de la COVID-19 sur la digitalisationisation

Architecture, Composants et Concepts du Web

Architecture Client-Serveur du Web

Schéma de l’Architecture Client-Serveur

  • Client : Logiciel (navigateur) qui envoie des requêtes pour accéder aux ressources.
  • Serveur : Ordinateur ou programme qui fournit les ressources demandées.

Serveur Web

  • Rôle : Responsable de la réception, du traitement et de la réponse aux requêtes HTTP (Hypertext Transfer Protocol) des clients, généralement des navigateurs web.
  • Fonctions Principales des Serveurs Web
    • Hébergement de Sites Web : Stockage et fourniture des fichiers (HTML, CSS, JavaScript, images, vidéos) nécessaires au fonctionnement des sites.
    • Gestion des Requêtes HTTP : Interprétation des requêtes (GET, POST) et réponse appropriée.
    • Exécution de Scripts : Gestion des scripts côté serveur (PHP, Python) pour du contenu dynamique.
    • Journalisation : Enregistrement des activités pour la surveillance.

Serveur Web

  • Exemples de Serveurs Web
    • Apache HTTP Server : Serveur open-source très utilisé, compatible avec divers langages et flexible pour le contenu dynamique.
    • Nginx : Connu pour sa haute performance et gestion de nombreuses connexions simultanées, souvent utilisé pour l’équilibrage de charge.
    • Microsoft IIS : Développé par Microsoft, bien intégré aux environnements Windows.

Protocoles

  • Un protocole est un ensemble de règles qui régissent la communication entre les systèmes informatiques, définissant comment les données sont envoyées, reçues et traitées entre les appareils.
  • Le protocole HTTP est utilisé pour la transmission de données sur le web et permet aux navigateurs de demander des ressources à des serveurs web :
    • Requête : Envoyée par le client (navigateur) pour demander une ressource. Par exemple, une requête pour accéder à une page web.
    • Réponse : Retour du serveur contenant le contenu demandé ou un message d’erreur.
  • Le protocole HTTPS sécurise les échanges par chiffrement et est désormais la norme pour les sites traitant des données sensibles qui traitent des données personnelles ou financières.*

URL ?

  • Une URL (Uniform Resource Locator) est une adresse web qui permet d’accéder à une ressource sur Internet. Elle spécifie à la fois l’emplacement de la ressource et le protocole utilisé pour y accéder (ex: HTTP ou HTTPS).
  • Les URL sont essentielles à la navigation web car elles permettent aux utilisateurs de trouver et de consulter des contenus tels que des pages web, des images, des vidéos, etc.
  • Exemlpe : https://en.wikipedia.org/wiki/Morocco
    • Protocole : https (version sécurisée de HTTP).
    • Nom de domaine : en.wikipedia.org (site de Wikipedia en anglais).
    • Chemin : /wiki/Morocco (l’emplacement de la page spécifique sur le Maroc).

Serveur DNS

  • Le DNS (Domain Name System) traduit les noms de domaine compréhensibles par l’homme (ex: www.wikipedia.org) en adresses IP que les ordinateurs peuvent traiter (ex: 208.80.154.224).

  • Il permet aux utilisateurs de naviguer facilement sur Internet sans devoir se souvenir d’adresses numériques complexes.

Schéma du Cycle de Requête HTTP

Schéma du Cycle de Requête HTTP

Qu’est-ce que la Programmation Web ?

La programmation web est la programmation informatique qui permet d’éditer des sites web. Elle permet la création d’applications, destinées à être déployées sur Internet ou en Intranet. Ces applications web sont constituées de pages web pouvant prendre différentes formes, telles que :

  • pages « statiques » : Il s’agit de fichiers. Le contenu n’est pas influencé par l’internaute qui la demande, et il évolue seulement avec une intervention manuelle de son code source.
  • Une page dynamique est une page web dont le contenu est créé en temps réel par le serveur lorsque l’utilisateur en fait la demande.
  • Contrairement aux pages statiques où le contenu est fixe et codé directement dans le fichier HTML, les pages dynamiques s’adaptent aux interactions de l’utilisateur ou à des données externes.

Programmation Web ?

  • La programmation web fait référence au codage et à l’écriture de scripts d’un site web, qu’il s’agisse de la partie front-end ou de la partie back-end.
  • Il s’agit principalement d’écrire du code pour gérer les données, traiter les entrées des utilisateurs et générer du contenu dynamique.
  • Elle consiste à utiliser une combinaison de langages de programmation, d’outils et de frameworks pour donner vie à un site web ou à une application web.

Front-end (Côté Client)

Le front-end désigne la partie visible et interactive d’une application ou d’un site web avec laquelle les utilisateurs interagissent directement.

  • Technologies :
    • HTML : Structurer le contenu des pages web.
    • CSS, Tailwind CSS : Styliser et présenter les éléments HTML (définir des styles tels que les couleurs, les polices, les mises en page et l’espacement..etc).
    • JavaScript : langage de script apporant interactivité et dynamisme pour les fonctionnalités côté client, avec son écosystème croissant de bibliothèques et de frameworks (React, Vue.js, Angular).
  • Des frameworks populaires comme React, Vue.js, et Angular sont souvent utilisés pour faciliter le développement du front-end moderne.

Back-end (Côté Serveur)

  • Le back-end représente la partie invisible d’une application web, responsable du Traitement des données et de la logique métier. - Il traite les requêtes des utilisateurs, communique avec les bases de données, et assure le bon fonctionnement des fonctionnalités côté serveur.

  • Technologies :

    • Langages : PHP, Python, Node.js, Java, Ruby.

    • Frameworks populaires : Django ou Flask (Python), Laravel (PHP), Express.js (Node.js), Spring (Java).

    • Bases de données : MySQL, PostgreSQL, MongoDB.

Pourquoi Apprendre la Programmation Web ?

Opportunités de carrière

  • Diversité des rôles :
    • Développeur Front-end : Spécialiste de l’interface utilisateur et de l’expérience client.
    • Développeur Back-end : Expert en logique serveur et gestion de bases de données.
    • Développeur Full-stack : Maîtrise à la fois le front-end et le back-end.
    • Designer UX/UI : Création d’interfaces utilisateur esthétiques et fonctionnelles.
    • Ingénieur DevOps : Gestion de l’infrastructure et de l’automatisation du déploiement.

Flexibilité professionnelle

  1. Travail à distance :
    • Possibilité de travailler de n’importe où avec une connexion internet.
    • Équilibre vie professionnelle/personnelle amélioré.
  2. Diversité des projets :
    • Du développement de petits sites personnels aux grandes applications d’entreprise.
    • Opportunités de travailler sur des projets à fort impact social.
  3. Apprentissage continu :
    • Domaine en constante évolution, offrant des défis intellectuels réguliers.
    • Nombreuses opportunités de développement professionnel.

Outils et Technologies du Développement Web

Éditeurs de Code et IDE

  • Visual Studio Code : Éditeur de code polyvalent avec extensions.
  • Sublime Text : Éditeur léger et rapide.
  • Atom : Éditeur open-source personnalisable.
  • WebStorm : IDE complet pour le développement web.